/**
 * @author cqb 2016-05-09.
 * @module Tooltip
 */

import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import './Tooltip.less';
import {alignPostion} from '../utils/Utils';


/**
 * Tooltip 类
 * @class Tooltip
 * @constructor
 * @extend BaseComponent
 */
class Tooltip extends React.Component {
    static displayName = 'Tooltip';

    static defaultProps = {
        delay: 0,
        theme: 'black'
    };

    static propTypes = {
        /**
         * 显示的内容
         * @attribute title
         * @type {String}
         */
        content: PropTypes.any,
        /**
         * 自定义class
         * @attribute className
         * @type {String}
         */
        className: PropTypes.string,
        /**
         * 自定义样式
         * @attribute style
         * @type {Object}
         */
        style: PropTypes.object,
        /**
         * 主题
         * @attribute theme
         * @type {String}
         */
        theme: PropTypes.string,
        /**
         * 停靠位置 'topLeft','top','topRight','bottom','bottomLeft',
         * 'bottomRight','left','leftTop','leftBottom','right',
         * 'rightTop','rightBottom'
         * @attribute theme
         * @type {String}
         */
        align: PropTypes.oneOf(['topLeft', 'top', 'topRight', 'bottom', 'bottomLeft', 'bottomRight', 'left',
            'leftTop', 'leftBottom', 'right', 'rightTop', 'rightBottom'])
    };

    mouseEnterTimer = null;

    state = {
        display: false,
        popperStyle: null
    }

    onMouseEnter = () => {
        window.clearTimeout(this.mouseEnterTimer);
        this.mouseEnterTimer = window.setTimeout(() => {
            this.showTip();
        }, this.props.delay || 100);
    }

    showTip () {
        const rect = this.rel.getBoundingClientRect();
        this.setState({
            display: true
        }, () => {
            const rect2 = this.popper.getBoundingClientRect();
            const popperStyle = alignPostion(this.props.align, this.rel, this.popper);
            popperStyle.display = 'block';
            this.setState({
                popperStyle
            }, () => {
                if (this.props.onShow) {
                    this.props.onShow();
                }
            });
        });
    }

    onMouseLeave = (e) => {
        window.clearTimeout(this.mouseEnterTimer);
        this.setState({
            display: false,
            popperStyle: null
        }, () => {
            if (this.props.onHide) {
                this.props.onHide(e);
            }
        });
    }

    render () {
        let {className, style, children, content, align, theme} = this.props;
        className = classNames('cm-tooltip', className, this.props.align, {
            [`cm-tooltip-${theme}`]: theme
        });

        let popperStyle = null;
        if (this.state.popperStyle) {
            popperStyle = this.state.popperStyle;
        } else {
            popperStyle = {display: this.state.display ? 'block' : 'none'};
        }

        return <div className={className} style={style} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
            <div className='cm-tooltip-rel' ref={f => this.rel = f}>
                {children}
            </div>
            <div className='cm-tooltip-popper' x-placement={align} style={popperStyle} ref={f => this.popper = f}>
                <div className='cm-tooltip-content'>
                    <div className='cm-tooltip-arrow'></div>
                    <div className='cm-tooltip-inner cm-tooltip-inner-with-width'>
                        {content}
                    </div>
                </div>
            </div>
        </div>;
    }
}

export default Tooltip;
